<template>
  <div class="box">
    <div class="backTo">
      <i class="iconfont icon-chevron-thin-left" @click="hui"></i>
    </div>
    <div class="head_title">{{ cinemaInfo.name }}</div>
    <!-- 影片服务 -->
    <div class="service" @click="chu">
      <div v-for="(item, index) in service" :key="index">
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div class="tishi" v-show="xianshi">
      <i class="iconfont icon-guanbi-01" @click="zou"></i>
      <div class="head_title1">{{ cinemaInfo.name }}</div>
      <div v-for="(item, index) in service" :key="index" class="fuqu">
        <div>{{ item.name }}</div>
        <p>{{ item.description }}</p>
      </div>
    </div>
    <!-- 影片地址 -->
    <div class="address">
      <i class="iconfont icon-dizhi-01"></i>
      <span :title="cinemaInfo.address">{{ cinemaInfo.address }}</span>
      <i class="iconfont icon-dianhua"></i>
    </div>
    <!-- 影片轮播 -->
    <div class="cimg">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in cinemaImg"
            :key="index"
            @click="cDetail(index)"
          >
            <img :src="item" alt="" class="img1" />
          </div>
        </div>
      </div>
    </div>
    <!-- 影片信息 -->
    <div class="cdetail">
      <i
        class="iconfont icon-angle-right"
        @click="quxiangqing(cdetail.filmId)"
      ></i>
      <div class="cdtop">
        <span class="ts1">{{ cdetail.name }}</span>
        <span class="ts2">{{ cdetail.grade }}分</span>
      </div>
      <div class="cdbottom">
        <span>{{ cdetail.category }}</span> |
        <span>{{ cdetail.runtime }}分钟</span> |
        <span>{{ cdetail.actors | getActors(cdetail.actors) }}</span>
      </div>
    </div>
    <div class="changci">
      <van-tabs @click="onClick">
        <van-tab :title="dangtian">
          <div class="jin" v-for="item in changci" :key="item.scheduleId">
            <div class="div1">
              <div class="start">{{ item.showAt | startTime }}</div>
              <div class="end">{{ item.endAt | endTime }}</div>
            </div>
            <div class="div2">
              <div class="language">
                {{ item.filmLanguage }}{{ item.imagery }}
              </div>
              <div class="ting">{{ item.hallName }}</div>
            </div>
            <div class="div3">
              <div class="price">￥{{ item.salePrice | price }}</div>
            </div>
            <div class="div4">
              <div class="mai">{{ item.isOnsell ? '购票' : '停售' }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="mingtian">
          <div class="jin" v-for="item in changci" :key="item.scheduleId">
            <div class="div1">
              <div class="start">{{ item.showAt | startTime }}</div>
              <div class="end">{{ item.endAt | endTime }}</div>
            </div>
            <div class="div2">
              <div class="language">
                {{ item.filmLanguage }}{{ item.imagery }}
              </div>
              <div class="ting">{{ item.hallName }}</div>
            </div>
            <div class="div3">
              <div class="price">￥{{ item.salePrice | price }}</div>
            </div>
            <div class="div4">
              <div class="mai">{{ item.isOnsell ? '购票' : '停售' }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import api from '@/api'
// 导入swiper
import 'swiper/swiper-bundle.min.css'
import Swiper from 'swiper'
export default {
  data() {
    return {
      cinemaInfo: [],
      service: [],
      xianshi: false,
      films: [],
      cinemaImg: [],
      cdetail: {},
      filmId: '',
      changci: [],
      dangtian: '',
      mingtian: ''
    }
  },
  filters: {
    getActors(arr) {
      if (arr) {
        const brr = arr.map((item) => item.name)
        return brr.join('|')
      } else {
        return '暂无主演'
      }
    },
    price(val) {
      return val / 100
    },
    startTime(val) {
      const b = val * 1000
      const data = new Date(b)
      let hour = data.getHours()
      if (hour < 10) {
        hour = '0' + String(hour)
      }
      let min = data.getMinutes()
      if (min < 10) {
        min = '0' + String(min)
      }
      return hour + ':' + min
    },
    endTime(val) {
      const b = val * 1000
      const data = new Date(b)
      let hour = data.getHours()
      if (hour < 10) {
        hour = '0' + String(hour)
      }
      let min = data.getMinutes()
      if (min < 10) {
        min = '0' + String(min)
      }
      return hour + ':' + min
    }
  },
  methods: {
    // 去电影详情界面
    quxiangqing(id) {
      this.$store.commit('filmId', id)
      this.$router.push('/movie/mdetail')
    },
    chu() {
      this.xianshi = !this.xianshi
    },
    zou() {
      // 影院服务关闭
      this.xianshi = false
    },
    hui() {
      // 顶部返回
      this.$router.back()
    },
    // 获取影院详情
    cDetail(index) {
      // 获取当前点击的影片信息
      this.cdetail = this.films[index]
      // 获取当前点击的影片id
      this.filmId = this.cdetail.filmId
      const id = this.$store.state.cinemaId
      // 发生请求获取该影片的场次信息
      this.$http
        .get(api.getChangCi + '?cinemaId=' + id + '&filmId=' + this.filmId)
        .then((res) => {
          const data = +new Date()
          this.changci = res.data.schedules.filter((item) => {
            return data < item.showAt * 1000
          })
        })
      this.$store.commit('filmId', this.filmId)
    },
    // name为当前点击的下标，title为当前点击的文本内容
    onClick(name, title) {
      console.log(name, title)
      // 获取当天的排片场次
      if (name === 0) {
        const id = this.$store.state.cinemaId
        // 发生请求获取该影片的场次信息
        this.$http
          .get(api.getChangCi + '?cinemaId=' + id + '&filmId=' + this.filmId)
          .then((res) => {
            const data = +new Date()
            this.changci = res.data.schedules.filter((item) => {
              return data < item.showAt * 1000
            })
          })
      }
      // 获取明天的排片场次
      if (name === 1) {
        /* const date = new Date()
        const ri = date.getDate()
        date.setHours(0)
        date.setMinutes(0)
        date.setSeconds(0)
        date.setMilliseconds(0)
        date.setDate(ri + 1)
        const sjc = date.getTime()
        console.log(sjc) */
        var d = new Date(new Date().toLocaleDateString()).getTime()
        const sjc = d + 24 * 3600 * 1000
        console.log(sjc)
        const id = this.$store.state.cinemaId
        this.$http
          .get(
            api.getChangCi +
              '?cinemaId=' +
              id +
              '&filmId=' +
              this.filmId +
              '&date=' +
              sjc
          )
          .then((res) => {
            console.log(res)
            this.changci = res.data.schedules
            // console.log(this.changci)
          })
      }
    }
  },
  created() {
    // 获取当前时间
    const time = new Date()
    const month = time.getMonth()
    const day = time.getDate()
    this.dangtian = '今天' + month + '月' + day + '日'
    this.mingtian = '明天' + month + '月' + (day + 1) + '日'

    // 隐藏底部
    this.$store.commit('hideFooter')
    const id = this.$store.state.cinemaId
    // console.log('影院id', id)
    // 获取影院基本信息
    this.$http.get(api.getcinemaInfo + '?cinemaId=' + id).then((res) => {
      this.cinemaInfo = res.data.cinema
      this.service = res.data.cinema.services
    })
    // 获取影院排片信息
    this.$http.get(api.getPaiPian + '?cinemaId=' + id).then((res) => {
      // console.log(res)
      this.films = res.data.films
      for (let i = 0; i < this.films.length; i++) {
        this.cinemaImg.push(this.films[i].poster)
      }
      this.cdetail = this.films[0]
      this.filmId = this.cdetail.filmId
      // 获取影片排片信息
      this.$http
        .get(api.getChangCi + '?cinemaId=' + id + '&filmId=' + this.filmId)
        .then((res) => {
          const data = +new Date()
          this.changci = res.data.schedules.filter((item) => {
            return data < item.showAt * 1000
          })
        })
    })
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true
    })
    console.log(swiper)
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .backTo {
    width: 100%;
    height: 30px;
    padding: 5px 0 0 2px;
    box-sizing: border-box;
  }
  .head_title {
    text-align: center;
    font-size: 17px;
    color: #191a1b;
    width: 100%;
    background: #fff;
    top: 0;
    height: 44px;
    line-height: 44px;
  }
  .service {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 12px;
    color: #ffb232;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    height: 30px;
    > div {
      flex: 1;
      margin: 0 5px;
      /* overflow: hidden; */
      white-space: nowrap;
      text-align: center;
      > div {
        border: 1px dotted #ffb232;
      }
      p {
        display: none;
      }
    }
  }
  .tishi {
    width: 100%;
    height: 100%;
    position: relative;
    i {
      font-size: 15px;
      position: relative;
      top: 10px;
      left: 20px;
    }
    .head_title1 {
      text-align: center;
      font-size: 17px;
      color: #191a1b;
      width: 100%;
      background: #fff;
      top: 0;
      height: 44px;
      line-height: 44px;
    }
    .fuqu {
      width: 100%;
      height: 60px;
      div {
        text-align: center;
        width: 20%;
        margin-left: 10px;
        float: left;
        border: 1px solid #ffb232;
        border-radius: 1px;
      }
      p {
        width: 70%;
        float: right;
        margin: 0;
        font-size: 12px;
      }
    }
  }
  .address {
    width: 100%;
    height: 50px;
    display: flex;
    font-size: 14px;
    padding: 15px 15px;
    box-sizing: border-box;
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      width: 240px;
    }
  }
  .cimg {
    width: 100%;
    padding: 30px 0;
    background-color: #6d5247;
    .swiper-container {
      overflow: hidden;
      .swiper-wrapper {
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          transition: 300ms;
          transform: scale(0.8);
        }
        .swiper-slide-active,
        .swiper-slide-duplicate-active {
          transform: scale(1);
        }
      }
      .swiper-pagination {
        width: 100%;
        height: 20px;
      }
    }
  }
}
.img1 {
  width: 88px;
  height: 130px;
}
.cdetail {
  width: 100%;
  padding: 5px 0;
  box-sizing: border-box;
  position: relative;
  i {
    position: absolute;
    right: 5px;
    top: 16px;
  }
  .cdtop {
    width: 100%;
    text-align: center;
    .ts1 {
      font-size: 15px;
      color: #191a1b;
      padding-right: 5px;
    }
    .ts2 {
      font-size: 16px;
      font-style: italic;
      color: #ffb232;
    }
  }
  .cdbottom {
    width: 100%;
    text-align: center;
    height: 25px;
    color: #797d82;
    font-size: 13px;
    padding: 5px 12% 0;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
}
.changci {
  width: 100%;
  .jin {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    align-items: center;
    justify-content: center;
    > div {
      flex: 1;
    }
    .div1 {
      .start {
        font-size: 15px;
        color: #191a1b;
      }
      .end {
        font-size: 13px;
        color: #797d82;
        margin-top: 2px;
      }
    }
    .div2 {
      text-align: center;
      .language {
        font-size: 15px;
        color: #191a1b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ting {
        font-size: 13px;
        color: #797d82;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .div3 {
      .price {
        color: #ff5f16;
        font-size: 15px;
        text-align: center;
      }
    }
    .div4 {
      .mai {
        margin-left: 20px;
        width: 40px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border: 1px solid #ff5f16;
        border-radius: 4px;
      }
    }
  }
}
</style>
